import React, { Component } from 'react';
// 需要自己添加的样式
import styles from "./css/WangEditorComponent.module.css";
import E from 'wangeditor'
class EditWangEditorComponent extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            editorContent: ''
        }
    }

    componentDidMount() {
        const toolbarElem = this.refs.toolbar
        const editorElem = this.refs.editor
        const editor = new E(toolbarElem, editorElem)
        // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'justify',  // 对齐方式
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'quote',  // 引用
            'emoticon',  // 表情
            'image',  // 插入图片
            'table',  // 表格
            'video',  // 插入视频
            'code',  // 插入代码
            'undo',  // 撤销
            'redo'  // 重复
        ];
        // 更新文本内容
        editor.customConfig.onchange = html => {
            this.onchangeHtml(html);
        }
        editor.customConfig.uploadImgServer = 'http://10.1.70.62:8000/uploadImg/uploadImg';
        editor.customConfig.uploadImgHooks = {
            success: (xhr, editor, result) => {
                console.log(this.state);
                // 图片上传并返回结果，图片插入成功之后触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            },
            fail: (xhr, editor, result) => {
                console.log(this.state);
                // 图片上传并返回结果，但图片插入错误时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            },
            error: (xhr, editor) => {
                // 图片上传出错时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                console.log('error');
                console.log(this.state);
            },
            // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
            // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
            customInsert: (insertImg, result, editor) => {
                console.log(this.state);
                // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                // result 必须是一个 JSON 格式字符串！！！否则报错
                var url = 'http://10.1.70.62:8000/images/img.png'
                insertImg(url)
            }
        };
        editor.customConfig.customAlert = (info) => {
            // info 是需要提示的内容
            console.log('customAlert');
            console.log(this.state);
        }
        editor.create()
    }

    onchangeHtml = (html) => {
        console.log(html);
        
        this.setState({
            editorContent: html
        })
    }


    render() {
        return (
            <div>
                <p>满足基本需求，功能有点少</p>
                <div ref="editorElem" style={{ textAlign: 'left' }}>
                    <div ref="toolbar" className={styles.toolbar}>
                    </div>
                    <div ref="editor" className={styles.editorElem}>
                    </div>
                </div>
                <p>效果</p>
                <div className="w-e-text" dangerouslySetInnerHTML={{__html: this.state.editorContent}}>
                </div>
            </div>
        );
    }
}

export default EditWangEditorComponent;